<template>
  <div class="home">
    <div class="swiper-container">
    <div class="swiper-wrapper">
      <div
        class="swiper-slide"
        v-for="banner in banners"
        :key="`banner-${banner.id}`"
        >
          <img :src="banner.imageUrl" :alt="banner.title">
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev swiper-button-black"></div>
    <div class="swiper-button-next swiper-button-black"></div>
</div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.css'
export default {
  name: 'Home',
  data () {
    return {
      banners: []
    }
  },
  // 代理跨域
  created () {
    this.$http.getCategory(1)
      .then(resp => {
        this.banners = resp.banners
        // nextTick，当数据改变以后要等到DOM元素根据新的数据渲染完成才能写轮播
        this.$nextTick().then(() => {
          this.swiper()
        })
      })
  },
  methods: {
    swiper () {
      // eslint-disable-next-line
      new Swiper ('.swiper-container', {
        direction: 'horizontal', // 垂直切换选项
        loop: true, // 循环模式选项
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination'
        },
        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        // 如果需要滚动条
        scrollbar: {
          el: '.swiper-scrollbar'
        },
        autoplay: true,
        effect: 'fade'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.swiper-container {
  width: 100%;
  height: 0;
  padding-top: 378 / 1008 * 100%;
  position: relative;
  .swiper-wrapper {
    position: absolute;
    left: 0;
    top: 0;
  }
  img {
    width: 100%;
  }
  .swiper-button-prev:after,
  .swiper-button-next:after {
    color: #769fcd;
  }
}
</style>
